<template>
  <div class="center">
    <div class="lay-right">
      <div id="report_parent" class="clearfix">
        <div
          class="report_sub clearfix"
          style="display:block;width: 100%;"
        >
          <div class="report_sub1" style="float: left; width: 60%">
            <div class="title">
                <span>标签云</span>
                <span class="btn">操作按钮</span>
              </div>
            <div class="report_sub2" style="width: 100%; position: relative;">
              
               <div id="container_1" style="width:100%;height: 180px;">
                <div class="collectionShowtable tags">
                    <a  v-for="(item,index) in tags" class="tag"  href="" :style="{color: RandomColor(),fontSize: Normal()}">{{item}}</a>
                </div>
              </div>
            </div>
          </div>
          <div
            class="report_sub1"
            style="position:relative;text-align: center;float: right; width: 39%"
          >
           <div class="title">
                <span>环形图</span>
                <span class="btn">操作按钮</span>
              </div>
            <div class="report_sub2" style="width:100%;">
              <div id="main" style="width: 100%;min-height: 180px;"></div>
            </div>
          </div>
        </div>
        <div
          class="report_sub"
          style="display:block;width: 60%; float:left; background-color:white;height: 100%;position:relative;margin: 0;"
        >
          <div class="report_sub1" style="float: left; width: 49%;">

            <div class="title">
              <span>雷达图</span>
              <span class="btn">操作按钮</span>
            </div>
            <div id="report_zxt" style="height: 90%;">
              <div class="collectionShowtable" style="">
                <div id="radar" style="width: 100%;height: 300px;"></div>
              </div>
            </div>
            
          </div>
          <div class="report_sub1" style="float: right; width: 49%">
            <div class="title">
              <span>标准柱形图</span>
              <span class="btn">操作按钮</span>
            </div>
            <div id="report_zxt" style="height: 90%;">
              <div class="collectionShowtable" style="">
                <div id="standard" style="width: 100%;height: 300px;"></div>
              </div>
            </div>
          </div>
        </div>
         <div
            class="report_sub1"
            style="position:relative;text-align: center;float: right; width: 39%;"
          >
           <div class="title">
                <span>卡片名称</span>
                <span class="btn">操作按钮</span>
              </div>
            <div class="report_sub2" style="width:100%;">
              <div class="collectionShowtable" style="">

                <div id="card" style="width: 100%;height: 300px;"></div>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "StatisticalAnalysis",
  data() {
    return {
      charts: "",
      chartsrd:"",
      chartssd:"",
      chartscd:"",
      opinionData: [
        { value: 310, name: "邮件营销" },
        { value: 234, name: "联盟广告" },
        { value: 135, name: "视频广告" },
        { value: 1548, name: "搜索引擎" },
        { value: 10, name: "邮件营销" },
        { value: 4, name: "联盟广告" },
        { value: 5, name: "视频广告" },
        { value: 48, name: "搜索引擎" }
      ],
       tags: ['javascript','python','go','html5','css3','webpack','node','vue','react','ts','ruby','c++']
    };
  },
  created() {
    // 设置当前侧边栏菜单
    // this.$store.commit('setCurrentSideMenu', {
    //   index: '/index/statisticalAnalysis',
    //   name: '统计分析'
    // })
  },
  methods: {
     // 随机颜色
    RandomColor(){
      console.log(12212)
        var r=Math.floor(Math.random()*256);
        var g=Math.floor(Math.random()*256);
        var b=Math.floor(Math.random()*256);
        return `rgb(${r},${g},${b})`;
    },
    // 随机字体
    Normal(){
      var num=Math.floor(Math.random()*20+12);
      return `${num}px`;
    },
    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {},
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        calculable: true,
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "60%"],
            center: ["50%", "60%"],
            data: this.opinionData
          }
        ]
      });
    },
    drawPierd(id) {
      this.chartsrd = echarts.init(document.getElementById(id));
      this.chartsrd.setOption({
        radar: [{                       // 雷达图坐标系组件，只适用于雷达图。
            center: ['50%', '50%'],             // 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。
            radius: 100,                        // 圆的半径，数组的第一项是内半径，第二项是外半径。
            startAngle: 90,                     // 坐标系起始角度，也就是第一个指示器轴的角度。
            name: {                             // (圆外的标签)雷达图每个指示器名称的配置项。
                formatter: '{value}',
                textStyle: {
                    fontSize: 15,
                    color: '#a2bc99'
                }
            },
            nameGap: 15,                        // 指示器名称和指示器轴的距离。
            splitNumber: 4,                     // (这里是圆的环数)指示器轴的分割段数。
            shape: 'circle',                    // 雷达图绘制类型，支持 'polygon'(多边形) 和 'circle'(圆)。
            axisLine: {                         // (圆内的几条直线)坐标轴轴线相关设置
                lineStyle: {
                    color: '#fff',                   // 坐标轴线线的颜色。
                    width: 1,                      	 // 坐标轴线线宽。
                    type: 'solid',                   // 坐标轴线线的类型。
                }
            },
            splitLine: {                        // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
                lineStyle: {
                    color: '#a2bc99',                       // 分隔线颜色
                    opacity: 0.7,
                    width: 1, 							 // 分隔线线宽
                }
            },
            splitArea: {                        // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                show: true,
                areaStyle: {                            // 分隔区域的样式设置。
                  color:"#fff"
                }
            },
            indicator: [{               // 雷达图的指示器，用来指定雷达图中的多个变量（维度）,跟data中 value 对应
                name: 'web秀',                           // 指示器名称   
                max: 150,                               // 指示器的最大值，可选，建议设置 
                //color: '#fff'                           // 标签特定的颜色。
            }, {
                name: '图二',
                max: 100
            }, {
                name: '图三',
                max: 80
            }]
        }],
        series: [{
            name: '雷达图',             // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
            type: 'radar',              // 系列类型: 雷达图
            itemStyle: {                // 折线拐点标志的样式。
                normal: {                   // 普通状态时的样式
                    lineStyle: {
                        width: 1
                    },
                    opacity: 0.2
                },
                emphasis: {                 // 高亮时的样式
                    lineStyle: {
                        width: 2
                    },
                    opacity: 1
                }
            },
            data: [{                    // 雷达图的数据是多变量（维度）的
                name: 'aa',                 // 数据项名称
                value: [110, 60, 67],        // 其中的value项数组是具体的数据，每个值跟 radar.indicator 一一对应。
                symbol: 'circle',                   // 单个数据标记的图形。
                symbolSize: 5,                      // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                label: {                    // 单个拐点文本的样式设置                            
                        normal: {  
                            show: true,             // 单个拐点文本的样式设置。
                            position: 'top',        // 标签的位置。
                            distance: 5,            // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                            color: '#000',          // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。
                            fontSize: 12,           // 文字的字体大小
                              
                        }  
                    },
                itemStyle: {                // 单个拐点标志的样式设置。
                    normal: {
                        borderColor: '#BBF6A7',       // 拐点的描边颜色。
                        borderWidth: 3,                        // 拐点的描边宽度，默认不描边。
                    }
                },
                lineStyle: {                // 单项线条样式。
                    normal: {
                        opacity: 0.6            // 图形透明度
                    }
                },
                areaStyle: {                // 单项区域填充样式
                    normal: {
                        color: '#DFF3D8',       // 填充的颜色。
                        opacity: .7
                        
                    }
                }
            }]
        }, ]
      });
    },
    drawPiesd(id) {
      this.chartssd = echarts.init(document.getElementById(id));
      this.chartssd.setOption({
       
    grid: {
        top: "25%",
        bottom: "10%"
    },
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
            label: {
                show: true
            }
        }
    },
    
    xAxis: {
        data: [
            "当年完成水量",
            "去年同期水量",
            "滚动目标值水量",
            "全年目标值水量",
            "当年完成金额",
            "去年同期金额",
            "滚动目标金额",
            "全年目标值",

        ],
        axisLine: {
            show: true //隐藏X轴轴线
        },
        axisTick: {
            show: true //隐藏X轴刻度
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#666" //X轴文字颜色
            }
        },
        axisLine: {
            lineStyle: {
                color: '#01FCE3'
            }
        },
    },
    yAxis: [{
            type: "value",
            name: "亿元",
            nameTextStyle: {
                color: "#666"
            },
            splitLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: true
            },
            axisLine: {
                show: true
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#666"
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            },
        },
        {
            type: "value",
            name: "同比",
            nameTextStyle: {
                color: "#666"
            },
            position: "right",
            splitLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true,
                formatter: "{value} %", //右侧Y轴文字显示
                textStyle: {
                    color: "#666"
                }
            }
        },
        {
            type: "value",
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                }
            }
        }
    ],
    series: [{
            name: "销售水量",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            itemStyle: {
                //折线拐点标志的样式
                color: "#058cff"
            },
            lineStyle: {
                color: "#058cff"
            },
            areaStyle: {
                color: "rgba(5,140,255, 0.2)"
            },
            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5]
        },
        {
            name: "主营业务",
            type: "bar",
            barWidth: 15,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "#00FFE3"
                        },
                        {
                            offset: 1,
                            color: "#4693EC"
                        }
                    ]),
                    barBorderRadius: [15, 15, 15, 15],
                }
            },
            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5]
        }
    ]
      });
    },
    drawPiecd(id) {
      var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];

      this.chartscd = echarts.init(document.getElementById(id));
      this.chartscd.setOption({
        backgroundColor: '#fff',
    grid: {
        left: '11%',
        top: '12%',
        right: '0%',
        bottom: '8%',
        containLabel: true
    },
    xAxis: [{
        show: false,
    }],
    yAxis: [{
        axisTick: 'none',
        axisLine: 'none',
        offset: '27',
        axisLabel: {
            textStyle: {
                color: '#666',
                fontSize: '16',
            }
        },
        data: ['南昌', '广州', '杭州', '宁夏', '兰州', '南宁', '长沙', '武汉', '合肥', '贵州']
    },  {
        name: '分拨延误TOP 10',
        nameGap: '50',
        nameTextStyle: {
            color: '#666',
            fontSize: '16',
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(0,0,0,0)'
            }
        },
        data: [],
    }],
    series: [{
            name: '条',
            type: 'bar',
            yAxisIndex: 0,
            data: [4, 13, 25, 29, 38, 44, 50, 52, 60, 72],
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        color: '#666',
                        fontSize: '16',
                    }
                }
            },
            barWidth: 18,
            itemStyle: {
                normal: {
                    color: function(params) {
                        var num = myColor.length;
                        return myColor[params.dataIndex % num]
                    },
                    barBorderRadius: 15,
                }
            },
            z: 2
        }, {
            name: '白框',
            type: 'bar',
            yAxisIndex: 1,
            barGap: '-100%',
            data: [99, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
            barWidth: 20,
            itemStyle: {
                normal: {
                    color: '#ddd',
                    barBorderRadius: 15,
                }
            },
            z: 1
        }
         
    ]
      });
    },
  },
  // 调用
  mounted() {
    this.$nextTick(function() {
      this.drawPie("main");
      this.drawPierd("radar");
      this.drawPiesd("standard");
      this.drawPiecd("card");
    });
  }
};
</script>

<style scoped>
#main {
  margin: 0;
  padding: 0;
  list-style: none;
}

.center {
  width: 99%;
  margin: 0px 0px 0px 7px;
  font-size: 14px;
  font-family: '微软雅黑';
}

#report_parent {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  /* padding: 20px 0; */
  /* padding-top: 270px; */
  position: relative;
}

.report_sub {
  width: 49%;
  height: 50%;
  display: inline-block;
  background-color: white;
  margin-bottom: 20px;
}

.report_sub1 {
  background-color: white;
  display: inline-block;
  height: 100%;
  border: 1px solid #eee;
  box-shadow: 0px 4px 4px #eee;
  border-radius: 8px;
}

.report_sub2 {
  width: 45.8%;
  /* background-color: white;
  display: inline-block;
  height: 100%; */
}

.report_sub2 table,
.report_sub2 tbody {
  display: block;
}

.report_sub2_tr {
  display: block;
  width: 100%;
  height: 100px;
  line-height: 100px;
}

.report_sub2_td {
  display: inline-block;
  width: 24%;
  height: 100%;
}

.layui-table-page {
  text-align: center;
}

.title {
  padding-left: 24px;
  padding-right: 24px;
  line-height: 35px;
  box-shadow: 0px 4px 4px #eee;
  display: flex;
  justify-content: space-between;

}
.title .btn {
  color:#2eb2f3;
}
.tags {
  margin: 0 auto;
  max-width: 500px;
  padding: 50px 100px;
}
.tag {
  display: inline-block;
  margin: 10px;
  text-decoration: none;
}
.clearfix::after{
  display: block;
  content: '';
  clear: both;
}
.collectionShowtable{
  padding-top: 5px;
}
</style>
